<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>姓名案例method方式实现</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--
        计算属性：
            1.定义：要用的属性不存在，要通过已有属性计算得来的属性叫计算属性
            2.原理：底层借助了Object.defineproperty方法提供的get和set方法来实现
            3.get函数什么时候调用：
                3.1 当计算属性在第一次被用到的时候会调用get方法
                3.2 当依赖的属性发生变化时会被再次调用
            4.优势：与methods实现相比，内部有缓存机制，效率更高，方便调试
            5.备注：
                5.1 计算属性最终会出现在vm对象上，直接调用就行。
                5.2 如果计算属性要修改，那必须通过set方法去响应式修改，导致计算属性所依赖的属性发生联动变化
    -->
  姓：<input type="text" v-model="firstName"/><br/>
  名：<input type="text" v-model="lastName"/><br/>
  <!--通过插值语法将函数表达式插入到这里-->
  全名：{{fullName}}</br>
  <!--fullName被用两次，但get只被调用一次，因为缓存的原因-->
  全名：{{fullName}}
</div>
</body>
<script type="text/javascript">
  var i =0;
  var vm = new Vue({
    el:'#root',
    /*data中的数据不管哪个数据发生了变化，Vue的模板就会重新解析一次*/
    data:{
      firstName:'张',
      lastName:'三'
    },
    computed:{
        fullName:{
            get(){
                //这里的this就是vm对象
                console.log('get第'+i++ +'调用')
                return this.firstName + '-' + this.lastName
            },
            // set 在fullName被修改时调用，传入的value就是修改的值
            set(value){
                var arr =value.split('-')
                this.firstName = arr[0]
                this.lastName = arr[1]
            }
        }
    }
  })
</script>
</html>